<template>
  <div class="center">
    <div class="card">
      <img src="@/assets/images/ic_my_data.png" alt="">
      <div class="photo">
        <img :src="form.head_img_url" alt="">
      </div>
      <div class="name">
        <span v-text="form.nick_name"></span>
        <span>{{form.user_type | userType}}</span>
        <span>ID:{{form.user_no}}</span>
      </div>
      <div class="tip">
        <img src="@/assets/images/ic_my_plan.png" alt="" @click="growthPlan">
      </div>
      <div class="number">
        <div class="div1">
          <span>{{form.score}}</span>
          <span>总工分</span>
        </div>
        <div class="div2">
          <span>{{form.spread_user_num}}</span>
          <span>累计推广人数</span>
        </div>
        <div class="div3">
          <span>{{form.spread_merchant_num}}</span>
          <span>累计推广商户数</span>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="ul">
      <div class="li" @click="goWorkPoint()">
        <div class="left">
          <div class="img"><img class="img1" src="@/assets/images/ic_my_workpoints.png" alt=""></div>
          <span>我的工分</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li" @click="goGeneralize()">
        <div class="left">
          <div class="img"><img class="img2" src="@/assets/images/ic_my_promote.png" alt=""></div>
          <span>我的推广</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li" @click="goWallet()">
        <div class="left">
          <div class="img"><img class="img3" src="@/assets/images/ic_my_wallet.png" alt=""></div>
          <span>我的钱包</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li" @click="goPrize()">
        <div class="left">
          <div class="img"><img class="img4" src="@/assets/images/ic_my_prize.png" alt=""></div>
          <span>我的奖品</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li" @click="goAddress()">
        <div class="left">
          <div class="img"><img class="img5" src="@/assets/images/ic_my_address.png" alt=""></div>
          <span>收货地址</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/8 0008 17:01.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData()
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        form: {}
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.userUserCenter(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
        })
      },
      /**
       * 成长计划
       */
      growthPlan() {
        this.$router.push({path: '/growthPlan'})
      },
      //工分明细
      goWorkPoint() {
        this.$router.push({path: '/workpoint'})
      },
      //我的推广
      goGeneralize() {
        this.$router.push({path: '/generalize'})
      },
      //钱包
      goWallet() {
        this.$router.push({path: '/wallet'})
      },
      //奖品
      goPrize() {
        this.$router.push({path: '/prize'})
      },
      //地址
      goAddress() {
        this.$router.push({path: '/address'})
      },
    },
    watch: {},
    filters: {
      userType(val) {
        if (val === 1) {
          return '社员'
        } else if (val === 2) {
          return '生产队'
        }
      }
    },
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .center {
    width: 100%;
    overflow: hidden;

    .card {
      width: 7rem;
      height: 3.55rem;
      margin: 0.25rem 0.25rem;
      position: relative;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 7rem;
        height: 3.55rem;
        z-index: 0;
      }

      .photo {
        width: 0.92rem;
        height: 0.92rem;
        border: 2px solid #fff;
        position: absolute;
        border-radius: 50%;
        top: 0.72rem;
        left: 0.62rem;
        z-index: 99;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        width: 2.5rem;
        position: absolute;
        top: 0.64rem;
        left: 1.78rem;
        z-index: 99;
        display: flex;
        flex-direction: column;

        span {
          text-align: left;
          font-size: 0.26rem;
          color: #FFFFFF;
          margin-bottom: 0.08rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span:first-child {
          font-size: 0.3rem;
        }
      }

      .tip {
        position: absolute;
        top: 0.93rem;
        right: 2.7rem;

        img {
          width: 2.46rem;
          height: 0.58rem;
        }
      }

      .number {
        width: 100%;
        padding: 0 0.3rem;
        box-sizing: border-box;
        position: absolute;
        bottom: 0.4rem;
        display: flex;
        justify-content: space-between;

        div {
          width: 2.4rem;
          display: flex;
          flex-direction: column;
          text-align: center;
          font-size: 0.3rem;
          color: #fff;

          span:first-child {
            margin-bottom: 0.22rem;
          }
        }

        .div1 {
          width: 1.5rem;
        }

        .div2 {
          width: 2.4rem;
        }

        .div3 {
          width: 3rem;
        }
      }
    }

    .line {
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }

    .ul {
      width: 100%;
      padding-left: 0.4rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 0.96rem;
        border-bottom: 1px solid #F6F6F6;
        font-size: 0.3rem;

        .left {
          display: flex;
          align-items: center;

          span {
            margin-left: 0.2rem;
          }

          .img {
            width: 0.66rem;
            display: flex;
            justify-content: center;
          }

          .img1 {
            width: 0.31rem;
            height: 0.4rem;
          }

          .img2 {
            width: 0.44rem;
            height: 0.37rem;
          }

          .img3 {
            width: 0.4rem;
            height: 0.38rem;
          }

          .img4 {
            width: 0.42rem;
            height: 0.42rem;
          }

          .img5 {
            width: 0.44rem;
            height: 0.44rem;
          }
        }

        .iconAll {
          width: 0.1rem;
          height: 0.2rem;
          margin-right: 0.4rem;
        }
      }
    }
  }

</style>
